<template>
  <div class="reportBox">
    <div class="content">
      <div class="headerBgc" :style="{ background: `url(${imgbgc})`, 'background-size': '100% 100%' }">
        <!-- <div class="name">{{name}}</div>
        <div class="title">{{whichQuestion=='1'? '双人关系测验':(whichQuestion=='2'? '家庭或团体测验':'社会情境测验')}}报告</div>
        <div class="typeBox">
          <span>测试日期：</span>
          <el-date-picker
            disabled
            v-model="testTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div> -->
      </div>
      <div class="questionBox">
        <div class="title">{{whichQuestion=='1'? '双人关系测验':(whichQuestion=='2'? '家庭或团体测验':'社会情境测验')}}报告
          <div class="demo-image__preview">
            <el-image 
              style="width: 100px; height: 100px"
              :src="url" 
              :preview-src-list="srcList">
            </el-image>
          </div>
        </div>
        <div class="tipInfo">
          <div class="typeBox">
            <span>测评时间：</span>
            <el-date-picker
              v-model="testTime"
              type="datetime"
              disabled
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <div class="typeBox">
            <span>姓名：</span>
            <span>{{name}}</span>
          </div>
        </div>
        <!-- 2023.2题库 -->
        <!-- <div v-for="(item,index) in questionArr" :key="index" class="itemBox">
          <div class="selectItem" v-show="item.type == 'select' || item.type == 'checkbox'">
            <p>{{index + 1}}. {{item.questName}}</p>
            <div>
              <span>被测人员选择了：</span>
              <el-select v-model="item.side" :multiple="item.type == 'checkbox'" :multiple-limit='3' filterable placeholder="请选择" disabled>
                <el-option
                  v-for="row in item.extra1"
                  :key="row"
                  :label="'卡片' + row"
                  :value="row">
                </el-option>
              </el-select>
            </div>
            <div class="imgBox" v-show="item.img && item.img !=''">
              <img :src="item.img" alt="">
            </div>
            <div class="explain"  v-show="item.explain && item.explain !=''">
              <span v-html="item.explain"></span>
            </div>
          </div>
          <div class="inputItem" v-show="item.type == 'input'">
            <p>{{index + 1}}. {{item.questName}}</p>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="item.side" disabled>
            </el-input>
          </div>
          <div class="otherItem" v-show="item.type == 'secondSelect'">
            <p>{{index + 1}}. {{item.questName}}</p>
            <el-select v-model="selectValue" @change="selectChangeFn" placeholder="请选择" disabled>
              <el-option label="会" value="会"></el-option>
              <el-option label="不会" value="不会"></el-option>
            </el-select>
            <div v-show="selectValue=='会'">
              <div style="margin:20px 0">
                <span>请重新选择：</span>
                <el-select v-model="anginSelect" multiple :multiple-limit='3' filterable placeholder="请选择" disabled>
                  <el-option
                    v-for="row in 46"
                    :key="row"
                    :label="'卡片' + row"
                    :value="row">
                  </el-option>
                </el-select>
              </div>
              <p>您为什么改变选择?</p>
              <el-input
                disabled
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="againSide">
              </el-input>
            </div>
            <div v-show="selectValue=='不会'" style="margin:20px 0">
              <p>您为什么不改变选择?</p>
              <el-input
                disabled
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="againSide">
              </el-input>
            </div>
          </div>
        </div> -->
        <!-- 2023.10题库 -->
        <template v-if="whichQuestion=='1'">
          <div v-for="(item,index) in newQuestion" :key="index" class="itemBox">
            <div class="selectItem" v-show="item.type == 'select'">
              <div style="display: inline-block;" v-for="(it,k) in item.question" :key="'aa' + k">
                <p :style="{ paddingLeft: k==0?'0px':'20px' }">
                  <span v-show="k==0">{{index + 1}}. </span> {{it.questName}}
                </p>
                <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'&&it.isUseMap==false">
                <el-option
                  v-for="row in it.extra1"
                  :key="row"
                  :label="k==0?('卡片' + row):('卡片' + item.question[0].side + '-' + row)"
                  :value="row">
                </el-option>
              </el-select>
              <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'&&it.isUseMap==true">
                <el-option
                  v-for="row in imgMap[item.question[0].side+0].map"
                  :key="row"
                  :label="'卡片' + item.question[0].side + '-' + row"
                  :value="row">
                </el-option>
              </el-select>
                <div style="display: inline-block;" v-if="it.sideType=='Array'">
                  <el-select disabled v-model="it.side[0]" filterable placeholder="请选择">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                  <span> —— </span>
                  <el-select disabled v-model="it.side[1]" filterable placeholder="请选择">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="inputItem" v-show="item.type == 'input'">
              <div v-for="(it,k) in item.question" :key="'bb' + k">
                <p><span v-show="k==0">{{index + 1}}. </span> {{it.questName}}</p>
                <el-input disabled
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="it.side">
                </el-input>
              </div>
            </div>
            <div class="radioItem" v-show="item.type == 'radio'">
              <p>{{index + 1}}. <span v-show="item.optional=='1'" class="color666">(选填)</span> {{item.questName}}</p>
              <div class="radio_box">
                <table style="width: 100%;">
                  <thead>
                    <tr>
                      <th></th>
                      <th v-for="(row,idx) in item.sideArr" :key="'ccc' + idx">{{ row }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(it,k) in item.question" :key="'cc' + k">
                      <td>{{ it.questName }}</td>
                      <td style="text-align: center;" v-for="(row,idx) in item.sideArr" :key="'cccc' + idx">
                        <el-checkbox disabled @change="changeFn($event,it,idx,item)" v-model="it.side[idx]"></el-checkbox>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="selectInputItem" v-show="item.type == 'selectInput'">
              <div v-for="(it,k) in item.question" :key="'dd' + k">
                <p v-show="k==0"><span>{{index + 1}}. </span> {{it.questName}}</p>
                <div v-if="it.ctype=='select'" style="display: inline-block;">
                  <span>卡片：</span>
                  <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                </div>
                <div v-if="it.ctype=='input'">
                  <el-input disabled
                    type="textarea"
                    :rows="4"
                    :placeholder="it.questName"
                    v-model="it.side">
                  </el-input>
                </div>
              </div>
            </div>
            <div class="mulselectItem" v-show="item.type == 'mulselect'">
              <div v-for="(it,k) in item.question" :key="'ee' + k">
                <p>
                  <span v-show="k==0">{{index + 1}}. </span>
                  <span v-show="item.optional=='1'" class="color666">(选填)</span>
                  <span>{{it.questName}}</span>
                </p>
                <div>
                  <span v-for="(row,idx) in item.sideArr" :key="'eee' + idx" 
                  style="display: inline-block;width: 20%;vertical-align: top;">
                    <el-checkbox disabled v-model="it.side[idx]">{{ row }}</el-checkbox>
                    <el-input disabled
                      v-show="row == '其他' && it.side[4]==true"
                      placeholder="请输入内容"
                      v-model="it.otherValue">
                    </el-input>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="whichQuestion=='2'">
          <div v-for="(item,index) in newQuestion" :key="index" class="itemBox">
            <div class="selectItem" v-show="item.type == 'select'">
              <div style="display: inline-block;" v-for="(it,k) in item.question" :key="'aa' + k">
                <p :style="{ paddingLeft: k==0?'0px':'20px' }">
                  <span v-show="k==0">{{index + 1}}. </span> {{it.questName}}
                </p>
                <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'&&it.isUseMap==false">
                <el-option
                  v-for="row in it.extra1"
                  :key="row"
                  :label="k==0?('卡片' + row):('卡片' + item.question[0].side + '-' + row)"
                  :value="row">
                </el-option>
              </el-select>
              <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'&&it.isUseMap==true">
                <el-option
                  v-for="row in imgMap[item.question[0].side+0].map"
                  :key="row"
                  :label="'卡片' + item.question[0].side + '-' + row"
                  :value="row">
                </el-option>
              </el-select>
                <div style="display: inline-block;" v-if="it.sideType=='Array'">
                  <el-select disabled v-model="it.side[0]" filterable placeholder="请选择">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                  <span> —— </span>
                  <el-select disabled v-model="it.side[1]" filterable placeholder="请选择">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="inputItem" v-show="item.type == 'input'">
              <div v-for="(it,k) in item.question" :key="'bb' + k">
                <p><span v-show="k==0">{{index + 1}}. </span> {{it.questName}}</p>
                <el-input disabled
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="it.side">
                </el-input>
              </div>
            </div>
            <div class="radioItem" v-show="item.type == 'radio'">
              <p>{{index + 1}}. <span v-show="item.optional=='1'" class="color666">(选填)</span> {{item.questName}}</p>
              <div class="radio_box">
                <table style="width: 100%;">
                  <thead>
                    <tr>
                      <th></th>
                      <th v-for="(row,idx) in item.sideArr" :key="'ccc' + idx">{{ row }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(it,k) in item.question" :key="'cc' + k">
                      <td>{{ it.questName }}</td>
                      <td style="text-align: center;" v-for="(row,idx) in item.sideArr" :key="'cccc' + idx">
                        <el-checkbox disabled @change="changeFn($event,it,idx,item)" v-model="it.side[idx]"></el-checkbox>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="selectInputItem" v-show="item.type == 'selectInput'">
              <div v-for="(it,k) in item.question" :key="'dd' + k">
                <p v-show="k==0"><span>{{index + 1}}. </span> {{it.questName}}</p>
                <div v-if="it.ctype=='select'" style="display: inline-block;">
                  <span>卡片：</span>
                  <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                </div>
                <div v-if="it.ctype=='input'">
                  <el-input disabled
                    type="textarea"
                    :rows="4"
                    :placeholder="it.questName"
                    v-model="it.side">
                  </el-input>
                </div>
              </div>
            </div>
            <div class="mulselectItem" v-show="item.type == 'mulselect'">
              <div v-for="(it,k) in item.question" :key="'ee' + k">
                <p>
                  <span v-show="k==0">{{index + 1}}. </span>
                  <span v-show="item.optional=='1'" class="color666">(选填)</span>
                  <span>{{it.questName}}</span>
                </p>
                <div>
                  <span v-for="(row,idx) in item.sideArr" :key="'eee' + idx" 
                  style="display: inline-block;width: 20%;vertical-align: top;">
                    <el-checkbox disabled v-model="it.side[idx]">{{ row }}</el-checkbox>
                    <el-input disabled
                      v-show="row == '其他' && it.side[4]==true"
                      placeholder="请输入内容"
                      v-model="it.otherValue">
                    </el-input>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="whichQuestion=='3'">
          <div v-for="(item,index) in newQuestion" :key="index" class="itemBox">
            <div class="selectItem" v-show="item.type == 'select'">
              <div style="display: inline-block;" v-for="(it,k) in item.question" :key="'aa' + k">
                <p :style="{ paddingLeft: k==0?'0px':'20px' }">
                  <span v-show="k==0">{{index + 1}}. </span> {{it.questName}}
                </p>
                <el-select disabled v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'">
                  <el-option
                    v-for="row in it.extra1"
                    :key="row"
                    :label="'卡片' + row"
                    :value="row">
                  </el-option>
                </el-select>
                <div v-if="it.sideType=='Array'">
                  <div style="display: inline-block;" v-for="(row,idx) in it.selectArr" :key="'aaa'+idx">
                    <span style="margin:0 10px 0">{{ it.selectArr[idx] }}</span>
                    <el-select disabled style="margin-right:20px" v-model="it.side[idx]" filterable placeholder="请选择">
                      <el-option
                        v-for="r in it.extra1[idx]"
                        :key="r"
                        :label="'卡片' + r"
                        :value="r">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
            <div class="inputItem" v-show="item.type == 'input'">
              <div v-for="(it,k) in item.question" :key="'bb' + k">
                <p>
                  <span v-show="k==0">{{index + 1}}. </span>
                  <span v-show="item.optional=='1'" class="color666">(选填)</span>
                  <span>{{it.questName}}</span>
                </p>
                <el-input disabled
                  type="textarea"
                  :rows="4"
                  :placeholder="it.placeholder?it.placeholder:'请输入内容'"
                  v-model="it.side">
                </el-input>
                <div v-show="it.haveOther">
                  <span style="margin:10px 0;display: inline-block;">其他：</span>
                  <el-input disabled
                    placeholder="请输入内容"
                    v-model="it.otherValue">
                  </el-input>
                </div>
              </div>
            </div>
            <div class="selectInputItem" v-show="item.type == 'selectInput'">
              <div v-for="(it,k) in item.question" :key="'dd' + k">
                <p v-show="k==0"><span>{{index + 1}}. </span> {{it.questName}}</p>
                <div v-if="it.ctype=='select'" style="display: inline-block;">
                  <span>卡片：</span>
                  <el-select v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'">
                    <el-option
                      v-for="row in it.extra1"
                      :key="row"
                      :label="'卡片' + row"
                      :value="row">
                    </el-option>
                  </el-select>
                </div>
                <div v-if="it.ctype=='input'">
                  <el-input disabled
                    type="textarea"
                    :rows="4"
                    :placeholder="it.questName"
                    v-model="it.side">
                  </el-input>
                </div>
              </div>
            </div>
            <div class="mulselectItem" v-show="item.type == 'mulselect'">
              <div v-for="(it,k) in item.question" :key="'ee' + k">
                <p>
                  <span v-show="k==0">{{index + 1}}. </span>
                  <span v-show="item.optional=='1'" class="color666">(选填)</span>
                  <span>{{it.questName}}</span>
                </p>
                <div>
                  <span v-for="(row,idx) in item.sideArr" :key="'eee' + idx" 
                  style="display: inline-block;width: 40%;vertical-align: top;">
                    <el-checkbox disabled v-model="it.side[idx]" @change="mulselectFn($event,it,idx,item)">{{ row }}</el-checkbox>
                    <el-input disabled
                      v-show="row == '其他' && it.side[4]==true"
                      placeholder="请输入内容"
                      v-model="it.otherValue">
                    </el-input>
                  </span>
                </div>
              </div>
            </div>
            <div class="mulradioItem" v-show="item.type == 'mulradio'">
              <p>{{index + 1}}. <span v-show="item.optional=='1'" class="color666">(选填)</span> {{item.questName}}</p>
              <div style="margin-bottom: 15px;" v-for="(it,k) in item.question" :key="'ff' + k">
                <p style="margin: 0 0 5px 10px;">{{it.questName}}</p>
                <div class="radio_box">
                  <table style="width: 100%;">
                    <thead>
                      <tr>
                        <th></th>
                        <th v-for="(row,idx) in item.sideArr" :key="'fff' + idx">{{ row }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(ii,kk) in item.selectArr" :key="'ffff' + kk">
                        <td>{{ ii }}</td>
                        <td style="text-align: center;" v-for="(row2,idx2) in it.side[0]" :key="'cccc' + idx2">
                          <el-checkbox disabled @change="changeFn($event,it,idx2,item,kk)" v-model="it.side[kk][idx2]"></el-checkbox>
                        </td>
                        <td>
                          <el-input disabled placeholder="请输入内容" v-model="it.remark[kk]"></el-input>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="btn">
          <el-button type="primary" @click="returnFn">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { seckGetReportById } from '@/api/home.js'
export default {
  data() {
    return {
      imgbgc: require('../assets/images/ptitle.png'),
      personType: 'adult',
      testTime: new Date(),
      itemname: '',
      questionArr: [
        // {
        //   questName: '请从下面图片中选出一张您和父亲相处模式最像的一张图片。',
        //   type: 'select',
        //   side: ''
        // },
        // {
        //   questName: '请问您为什么选择这张图片?',
        //   type: 'input',
        //   side: ''
        // },
        // {
        //   questName: '请问图片中哪个代表您？',
        //   type: 'input',
        //   side: ''
        // },
        // {
        //   questName: '请您描述一下图片中两人（团体）的关系怎么样？?',
        //   type: 'input',
        //   side: ''
        // },
        // {
        //   questName: '请您再选择一张与您当前关系相反的图片。',
        //   type: 'select',
        //   side: ''
        // },
        // {
        //   questName: '请问您觉得这两张图片主要有什么不同或差异？?',
        //   type: 'input',
        //   side: ''
        // }
      ],
      whichQuestion: '1', 
      recordId: '',
      name: sessionStorage.getItem('name'),
      selectValue: '',
      anginSelect: '',
      againSide: '',
      WAIMS_TOKEN: '',
      testedId: '',
      newQuestion: [],
      url: require('../assets/images/double.jpg'),
      srcList: [
        require('../assets/images/double.jpg')
      ],
      srcListArr: [
        require('../assets/images/double.jpg'),
        require('../assets/images/family.jpg'),
        require('../assets/images/society.jpg')
      ],
      imgMap: JSON.parse(JSON.stringify(this.$store.state.imgMapping4Family))
    }
  },
  mounted() {
    if(localStorage.getItem('WAIMS_TOKEN') && localStorage.getItem('WAIMS_TOKEN') !== '') {
      this.WAIMS_TOKEN = localStorage.getItem('WAIMS_TOKEN')
      this.itemname = this.$route.query.itemname ? this.$route.query.itemname : ''
      this.recordId = this.$route.query.recordId ? this.$route.query.recordId : ''
      this.testedId = this.$route.query.testedId ? this.$route.query.testedId : sessionStorage.getItem('testedId')
      this.testTime = this.$route.query.testTime ? this.$route.query.testTime : new Date()
      this.whichQuestion = this.$route.query.whichQuestion ? this.$route.query.whichQuestion : ''
      this.url = this.srcListArr[this.whichQuestion-1]
      this.srcList = [this.url]
      this.getReportFn()
    } else {
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    }
    this.personType = sessionStorage.getItem('personType')
    if(this.personType == 'adult') {
      this.imgbgc = require('../assets/images/ptitle.png')
    } else {
      this.imgbgc = require('../assets/images/ctitle.png')
    }
  },
  methods: {
    getReportFn() {
      var query = {
        WAIMS_TOKEN: this.WAIMS_TOKEN,
        // testId: 10008,
        testedId: this.testedId,
        id: this.recordId
      }
      seckGetReportById(query).then(res => {
        if(res.code === 200) {
          // this.questionArr = JSON.parse(res.data.result)
          this.newQuestion = JSON.parse(res.data.result)
          this.itemname = res.data.extra2
          this.whichQuestion = res.data.whichQuestion
          // 二次筛选的回显
          for(var i in this.questionArr) {
            if(this.questionArr[i].type === 'secondSelect') {
              // ['会', '6,5,4', '222']   ['不会', '222']
              var temparr = this.questionArr[i].side.split(';')
              this.selectValue = temparr[0]
              if (this.selectValue === '会') {
                this.anginSelect = temparr[1].split(',')
                this.againSide = temparr[2]
              } else {
                this.anginSelect = ''
                this.againSide = temparr[1]
              }
            }
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    returnFn() {
      this.$router.push({
        path: '/personList',
        query: {
          type: 'look'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.reportBox {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  .content {
    position: relative;
  }
  .headerBgc {
    height: 140px;
    background: url(../assets/images/ptitle.png) no-repeat;
    background-size: cover 100%;
    // border-bottom-right-radius: 70px;
    // border-bottom-left-radius: 70px;
    color: #fff;
    // padding: 100px 0 0 300px;
    .name {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .typeBox {
      font-size: 30px;
    }
  }
  .questionBox {
    position: absolute;
    top: 140px;
    left: 50%;
    margin-left: -600px;
    .title {
      font-size: 30px;
      font-weight: 700;
      margin: 10px 0;
      color: #d07b59;
      text-align: center;
      border-bottom: 1px solid #d07b59;
      padding-bottom: 20px;
    }
    .tipInfo {
      display: flex;
      margin-bottom: 10px;
      border-bottom: 1px solid #d07b59;
      padding-bottom: 10px;
      >div {
        display: inline-block;
        width: 33%;
        >span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .itemBox {
      width: 1200px;
      padding-top: 10px;
      // background-color: #ffffff;
      // box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 20%);
      // border-radius: 40px;
      // width: 1000px;
      // margin-bottom: 30px;
      // padding: 40px 100px;
    }
    .selectItem, .inputItem, .radioItem, .selectInputItem, .mulselectItem, .mulradioItem {
      // margin-bottom: 20px;
      p {
        margin-bottom: 15px;
        display: inline-block;
      }
    }
    .selectItem {}
    .inputItem {}
    .radioItem, .mulradioItem {
      .radio_box {
        border: 1px solid #d07b59;
        border-radius: 4px;
        padding: 10px;
      }
    }
    .selectInputItem {}
    .mulselectItem {}
    .mulradioItem {}
    .selectItem {
      .imgBox {
        text-align: center;
        margin: 20px 0;
      }
      .explain {
        // text-indent: 2em;
        .explainClass {
          font-weight: bold;
          text-indent: 2em;
          display: inline-block;
        }
      }
    }
    .inputItem {}
  }
  .color666 {
    color: #666;
  }
  .btn {
    margin-top: 20px;
    margin-left: 500px;
    margin-bottom: 40px;
  }
}
</style>

<style lang="scss">
.explainClass {
  font-weight: bold;
  text-indent: 2em;
  display: inline-block;
}
.el-select-dropdown__item.selected {
  color: #d07b59;
}
.reportBox {
  .el-select {
    width: 180px;
  }
  .el-button {
    background: #d07b59 !important;
    border: 1px solid #d07b59 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: none !important;
  }
  .el-textarea,.el-input{
    border: 1px solid #d07b59;
    border-radius: 4px;
  }
  .el-textarea__inner,.el-input__inner,.el-input__wrapper{
    border: none;
    box-shadow: none;
  }
  .el-textarea__inner:hover,.el-input__inner:hover,.el-select .el-input__wrapper.is-focus {
    box-shadow: none !important;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #d07b59;
    border-color: #d07b59;
  }
  .el-checkbox,.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333;
  }
  .el-checkbox__inner:hover {
    border-color: #d07b59;
  }
}
</style>